<template>
  <p class="demension-title"
    >{{ title }}
    <el-popover v-if="hasHelp" placement="top-start" :title="title" :width="200" trigger="hover">
      <template #reference>
        <el-icon style="float: right; padding-top: 10px">
          <QuestionFilled />
        </el-icon>
      </template>
      <p v-if="content" style="font-size: 12px">{{ content }}</p>
      <slot></slot>
    </el-popover>
  </p>
</template>

<script lang="ts" setup>
  import { QuestionFilled } from '@element-plus/icons-vue';
  import { toRefs } from 'vue';

  const props = defineProps({
    hasHelp: {
      type: Boolean,
      default: false,
    },
    title: String,
    content: String,
  });

  const { title, content, hasHelp } = toRefs(props);
</script>
